<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px'}">
		<!-- 数据内容 -->
		<navBar title="附近维修门店" marginLeft="40%" :showHome="false"/>
		<view class="main-wrap" v-if="data.length">
			<view class="mw-content" v-for="item in data">
				<view class="mwc-top">
					<view class="mwct-img">
						<image :src="item.photo1" mode="scaleToFill"></image>
					</view>
					<view class="mwct-info">
						<view class="mwcti-title">
							<text class="mwctit-name">
								{{ item.storeName }}
							</text>
						</view>
						<view class="mwcti-eval" v-if="item.serviceStar">
							<uni-rate :max="1" :size="16" :value="1" allow-half activeColor="#CF1A1B" />
							<text class="mwctie-text">{{ item.serviceStar || '暂无评分' }}</text>
						</view>
						<view class="mwcti-palce">
							<text class="mwctip-km"> {{ item.distanceKm.toFixed(2) || 0 }}km</text>
							<text class="mwctie-flag"> | </text>
							<text class="mwctip-site"> {{ item.address }}</text>
						</view>
					</view>
				</view>
				<view class="mwc-bottom">
					<view class="mwcb-item" v-for="con in relationList" @click="handleAction(con,item)">
						<image :src="con.icon" mode="scaleToFill"></image>
						<text class="mwcbi-title">{{ con.title }}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isEmpty==0" class="empty">
			<image src="../../static/empty.png"></image>
			<text>无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	import navBar from '@/components/navBar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				// 数据内容
				data: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				total: 0,
				formDatas: {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					nowLat: null,
					nowLng: null,
					//     "nowLat": 22.54846,
					//     "nowLng": 114.06455,
				},
				relationList: [
					{
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_daohang.png',
						title: '门店导航',
						flag: 'navigation'
					},
					{
						icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_dianhua.png',
						title: '联系门店',
						flag: 'phone'
					},
				],
				isEmpty: false,
				paddingTop: 0,
				isRequest: true, // 用于判断是否调用接口
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
			...mapGetters('global', ['getTabBarIndex', 'getSystemInfo', 'getLocation'])
		},
		methods: {
			...mapMutations('global', ['setNowLocation', 'getNowLocation']),
			async initData(val) {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: async (resp) => {
						const {
							longitude,
							latitude
						} = resp
						const res = await this.$request({
							method: 'get',
							url: '/ltb-center/union-insurance-claim/queryStoreList',
							data: {
								thirdId: val.thirdId,
								lat: latitude,
								lng: longitude
							}
						}).catch((res) => {
							uni.hideLoading()
						})
						this.data = res.datas
						this.isEmpty = this.data.length
						uni.stopPullDownRefresh();
						uni.hideLoading()

					},
					fail: res => {
						console.log('fail', res);
						uni.hideLoading()
					}
				})
			},
			handleAction(con, item) {

				if (con.flag === 'phone') {
					// 区分设备
					if (uni.getSystemInfoSync().osName === 'ios') {
						uni.makePhoneCall({
							phoneNumber: item.phone
						})
					} else {
						uni.showModal({
							title: "拨打电话",
							content: item.phone,
							confirmText: "确认",
							cancelText: "取消",
							success: res => {
								if (res.confirm) {
									uni.makePhoneCall({
										phoneNumber: item.phone
									})
								}
							}
						})
					}
				} else {
					uni.openLocation({
						latitude: Number(item.lat),
						longitude: Number(item.lng),
						name: item.storeName,
						address: item.address,
					});
				}
			},
		},
		onLoad(option) {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			this.initData(option)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.65);
		background-color: #ffffff;

		// 条件查询
		.top-select {
			// position: fixed;
			z-index: 9;
			width: 100vw;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 88rpx;
			height: 44px;
			line-height: 44px;
			background-color: #ffffff;

			.tst-icon {
				margin-left: 8px;
			}

			// 选中时颜色
			.conColor,
			.kmColor {
				color: $uni-primary;
			}

			.ts-dtdw {
				display: flex;
				align-items: center;

				image {
					width: 22px;
					height: 22px;
					margin-right: 8rpx;
				}
			}
		}

		// 弹出层
		.popup-content {
			padding: 0 32rpx;

			.pc-text {
				height: 44px;
				line-height: 44px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
				padding-left: 56rpx;

				&:nth-last-child(1) {
					border-bottom: none;
				}
			}
		}

		// 数据内容
		.main-wrap {

			// 文字颜色
			.text-color {
				color: $uni-primary;
			}

			.mw-content {
				padding-top: 32rpx;
				padding-bottom: 32rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);

				.mwc-top {
					display: flex;

					.mwct-img image {
						width: 200rpx;
						height: 100px;
					}

					.mwct-info {
						font-size: 12px;
						margin-left: 20rpx;
						flex: 1;
						overflow: hidden;

						.mwctie-flag {
							margin: 0 8rpx;
							color: rgba(0, 0, 0, 0.35);
						}

						// 标题
						.mwcti-title {
							display: flex;
							align-items: center;
							font-size: 15px;
							color: rgba(0, 0, 0, 0.85);
							margin-bottom: 20rpx;

							.mwctit-name {
								display: inline-block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								flex: 1;
								text-shadow: 0 0 0.1px currentcolor;
							}

							.mwctit-tag {
								font-size: 12px;
								display: inline-block;
								color: $uni-primary;
								border: 1px solid $uni-primary;
								border-radius: 2px;
								padding: 2rpx 4rpx;
								margin-left: 18rpx;
								width: 54px;
								margin-right: 20rpx;
							}
						}

						// 评分
						.mwcti-eval {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							.mwctie-text {
								margin-left: 8rpx;
							}
						}

						// 地址
						.mwcti-palce {
							display: flex;

							.mwctip-site {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								width: 350rpx;
							}
						}

						// 优惠
						.mwcti-discount {
							display: flex;

							.mwctid-label {
								color: rgba(255, 123, 123, 1);
								border: 1px solid rgba(255, 123, 123, 1);
								background-color: #ffefef;
								padding: 4rpx 14rpx;
								margin-right: 8rpx;
								border-radius: 4px;
							}
						}
					}
				}

				.mwc-bottom {
					display: flex;
					justify-content: flex-start;
					padding-left: 210rpx;

					.mwcb-item {
						display: flex;
						align-items: center;
						padding: 30rpx 0 20rpx;
						margin-right: 58rpx;

						&:nth-last-child(1) {
							margin-right: 0;
						}

						image {
							width: 30px;
							height: 30px;
							margin-right: 12rpx;
						}
					}
				}
			}

			// 加载中、
			.mw-loadmore-text {
				text-align: center;
				padding: 10px;
			}
		}

		.empty {
			width: 100%;
			height: 90vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 220px;
				height: 180px;
			}

			text {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.45);
				line-height: 30rpx;
			}
		}

		// 弹出层
		.popup-view {
			position: fixed;
			left: 0;
			z-index: 10;
			width: 100%;
			background-color: #ffffff;
		}

		.popup-shadow {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.4);
		}
	}
</style>
